<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组内成员</title>
  <link rel="stylesheet" href="./css/swiper.css">
  <link rel="stylesheet" href="./css/aside1.css">
</head>

<body>
  <!-- 导航 -->
  <nav>
    <div class="left">
      <img src="./images/222.jpg" alt="">
      <p>Study</p>
    </div>
    <div class="center">
      <a href="./index.html" target="_blank">
        <li>学习首页<span></span></li>
      </a>
      <a href="./aside1.html" target="_blank">
        <li>组内成员<span></span></li>
      </a>
      <a href="./aside4.html" target="_blank">
        <li>教学课程</span><span></span></li>
      </a>
      <a href="" target="_blank">
        <li>讲解视频<span></span></li>
      </a>
        <a href="https://gitee.com/state2023/group-6.git" target="_blank">
          <li>码云仓库<span></span></li>
        </a>
       
          

    </div>
    <div class="right">
      <a href="./登录.html"><img src="./images/h2.png" alt="" class="h2" title="登录" target="_blank"></a>
      <input type="search" name="" id="search" placeholder="请输入关键字">
    </div>
  </nav>

  <!-- swiper轮播图 -->
  <div class="swiper-container rotation swiper-container-horizontal">
    <div class="swiper-wrapper">
      <img src="./images/111.jpg" alt="" class="swiper-slide">
      <img src="./images/222.jpg" alt="" class="swiper-slide swiper-slide-prev">
      <img src="./images/333.png" alt="" class="swiper-slide swiper-slide-active">
      <img src="./images/444.jpg" alt="" class="swiper-slide swiper-slide-next">
    </div>
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
      <span class="swiper-pagination-bullet"></span>
      <span class="swiper-pagination-bullet"></span>
      <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
      <span class="swiper-pagination-bullet"></span>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!--主文-->
  <div class="intro">
    <p class="o1">小组成员的分工</p>
    <p class="o2">小组成员名字和分工</p>
    <div class="pp">

      <div class="tu">
        <p>成型(组长)</p><br>
        <p>轮播图正方体登录注册页</p>
      </div>
      <div class="tu">
        <p>吴晶晶</p><br>
        <p>课程卡片</p>
      </div>
      <div class="tu">
        <p>扎西洋宗</p><br>
        <p>首页</p>
      </div>
      <div class="tu">
        <p>陈锦漪</p><br>
        <p>整合</p>
      </div>
      <div class="tu">
        <p>谭欣乔</p><br>
        <p>视频与讲解</p>
      </div>
      <div class="tu">
        <p>刘德轩</p><br>
        <p>成员介绍</p>
      </div>

    </div>
  </div>
  <!--主文-->

  <!--自我介绍 -->
  <div class="liu">
    <p class="o3">组员有话说</p>
    <p class="o2">组员留言</p>
    <div>
      <!-- <hr color="#CCC"> -->
      <div class="block">
        <img src="./images/成型.jpg" class="tuu">
        <p class="a1">哒哒哒</p>
        <div>
          <p>学习是一种态度，努力是一种品质。</p>
          <span class="a2">2024-6-15 广东</span>
        </div>
      </div>
      <!-- <hr color="#CCC"> -->
      <div class="block">
        <img src="./images/吴晶晶.jpg" class="tuu">
        <p class="a1">cattai</p>
        <div>
          <p>学习是通往成功的唯一途径。</p>
          <span class="a2">2024-6-15 广东</span>
        </div>
      </div>
      <!-- <hr color="#CCC"> -->
      <div class="block">
        <img src="./images/扎西洋宗.jpg" class="tuu">
        <p class="a1">so_cool</p>
        <div class="pin">
          <p>学习不是为了别人，而是为了自己。</p>
          <span class="a2">2024-6-15 广东</span>
        </div>
      </div>
      <!-- <hr color="#CCC"> -->
      <div class="block">
        <img src="./images/陈锦漪.jpg" class="tuu">
        <p class="a1">cjyi</p>
        <div class="pin">
          <p>学习是一种投资，付出越多，回报越高。</p>
          <span class="a2">2024-6-15 广东</span>
        </div>
      </div>
      <!-- <hr color="#CCC"> -->
      <div class="block">
        <img src="./images/谭欣乔.jpg" class="tuu">
        <p class="a1">txq</p>
        <div class="pin">
          <p>学习是一种习惯，养成良好的学习习惯，终身受益。</p>
          <span class="a2">2024-6-15 广东</span>
        </div>
      </div>
      <!-- <hr color="#CCC"> -->
      <div class="block">
        <img src="./images/刘德轩.jpg" class="tuu">
        <p class="a1">ddd</p>
        <div class="pin">
          <p>学习是一种力量，拥有知识的人，才能拥有改变世界的力量。</p>
          <span class="a2">2024-6-15 广东</span>
        </div>
      </div>
      <!-- <hr color="#CCC"> -->
    </div>
  </div>
  <!--自我介绍 -->

  <!--留言-->
  <div class="f1">
    <ul>
      <li>
        <p>姓名：</p>
        <input type="text" name="" id="">
      </li>
      <li>
        <p>电话：</p>
        <input type="text" name="" id="">
      </li>
      <li>
        <p>邮箱：</p>
        <input type="text" name="" id="">
      </li>
      <li>
        <p>QQ：</p>
        <input type="text" name="" id="">
      </li>
    </ul>
    <div class="liuyan">
      <p>留言：</p>
      <textarea name="" id="tx" cols="30" rows="10" placeholder="发一条友善的留言"></textarea>
      <span class="total" style="color: white;margin-left: 200px;">0 / 200字</span>
      <div class="bt">
        <input type="submit" name="tj" value="提交">
        <input type="reset" name="cz" value=" 重置">
      </div>
    </div>
    <script>
      let tx = document.getElementById('tx')
      let total = document.querySelector('.total')
      // let liu = document.querySelector('.liu')
      tx.addEventListener('focus', function () {
        total.style.opacity = 1
      })
      tx.addEventListener('blur', function () {
        total.style.opacity = 0
      })
      tx.addEventListener('input', function () {
        total.innerHTML = `${tx.value.length}/200字`
      })
      tx.addEventListener('keyup', (e) => {
        if (e.key === 'Enter') {
          // if (tx.value.trim() !== '') {
          //   let block = document.createElement('div')
          //   block.className = block
          //   total.parentNode.appendChild(block)
          //   block.innerHTML = tx.value
          //   block.style.position = 'relative'
          //   block.style.left = '50px'
          //   block.style.width = '200px'
          //   block.style.height = '200px'
          //   block.style.backgroundColor = 'blue'
          // }
          tx.value = ''
          total.innerHTML = `0 / 200字`
        }
      })
    </script>
  </div>
  <!--留言-->
  <footer>
    <div class="mains">
      <div id="marquee">
        <span id="marquee_text" style="left: 306px;">
          学无止境。&nbsp;
          Knowledge is infinite.
        </span>
      </div>
      <p>Copyright ( C ) www.yizhiwang.com</p>
    </div>
  </footer>
  <script src="./js/swiper.min.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>